<div class="book-list-container">
  <div class="page-header">
    <h1 class="page-heading">图书目录管理</h1>

    <div class="performance-metrics" style="margin: 10px 0 20px; padding: 20px; background: #f8f9fa; border-radius: 4px;">
      <h1 style="margin: 0 0 10px 0; color: #409EFF; font-size: 1.4rem;">性能指标</h1>
      <div style="display: flex;  gap: 10px;">
        <div class="metric-item">
          <span class="metric-label">渲染时间：</span>
          <span class="metric-value" style="color: #e67e22; font-weight: bold;">{{ renderTime || '0' }} ms</span>
        </div>
        <div class="metric-item">
          <span class="metric-label">DOM创建数：</span>
          <span class="metric-value" style="color: #409EFF;">{{ domTrackStats.created || 0 }}</span>
        </div>
        <div class="metric-item">
          <span class="metric-label">DOM复用数：</span>
          <span class="metric-value" style="color: #67C23A;">{{ domTrackStats.reused || 0 }}</span>
        </div>
        <div class="metric-item">
          <span class="metric-label">DOM销毁数：</span>
          <span class="metric-value" style="color: #F56C6C;">{{ domTrackStats.destroyed || 0 }}</span>
        </div>
        <div class="metric-item">
          <span class="metric-label">DOM复用率：</span>
          <span class="metric-value" style="color: #909399; font-weight: bold;">{{ reuseRate }}%</span>
        </div>
      </div>
    </div>

    <div class="btn-group">
      <button nz-button [nzType]="keyType === 'id' ? 'primary' : 'default'"  (click)="toggleKeyType('id')">ID作为Key</button>
      <button nz-button [nzType]="keyType === 'index' ? 'primary' : 'default'"  (click)="toggleKeyType('index')">Index作为Key</button>
      <button nz-button [nzType]="keyType === 'none' ? 'primary' : 'default'"  (click)="toggleKeyType('none')">无Key</button>
      <button nz-button nzType="primary"  (click)="bulkGenerate()">批量生成1000项</button>
      <button nz-button nzType="primary"  (click)="addItem()">添加项</button>
      <button nz-button nzType="primary"  (click)="removeItem()">删除项</button>
      <button nz-button nzType="primary"  (click)="shuffleList()">打乱顺序</button>
      <button nz-button nzType="primary"  (click)="insertRandomBook()">插入元素</button>
      <button nz-button nzType="primary"  (click)="deleteRandomBook()">删除元素</button>
      <button nz-button nzType="primary"  (click)="replaceAllBooks()">替换所有</button>
      <button nz-button nzType="primary"  (click)="appendToEnd()">尾部追加</button>
      <button nz-button nzType="primary"  (click)="stepInsert()">步步插入</button>
      <button nz-button nzType="primary"  (click)="insertToMiddle()">中间插入</button>
      <button nz-button nzType="primary"  (click)="partialUpdate()">局部更新</button>

      <button nz-button nzType="primary"  (click)="autoTestReuse()">自动测试复用（单次）</button>
      <button nz-button nzType="primary"  (click)="autoTestBatchAndExportExcel()">批量测试并导出Excel</button>
      <button nz-button nzType="primary"  (click)="exportReuseStatsToExcel()">导出Excel（当前）</button>


    </div>
  </div>
  <div *ngIf="renderTime" style="margin-bottom:12px;color:#e67e22;font-weight:bold;">
    本次渲染耗时：{{ renderTime }} ms<br>
    节点创建：{{ domTrackStats.created }}，复用：{{ domTrackStats.reused }}，销毁：{{ domTrackStats.destroyed }}，复用率：{{ reuseRate }}%
  </div>
  <div *ngIf="showAcademicTestList" class="academic-test-list">
    <span *ngFor="let book of academicBooks; trackBy: trackByBookId" [attr.data-id]="book.id"
      style="padding: 5px; border: 1px solid #eee; margin: 2px; display: inline-block;">{{ book.title }}</span>
  </div>





  <div class="module-info">
    <div class="info-icon">
      <nz-icon nzType="info-circle" nzTheme="outline"></nz-icon>
      <span>模块说明</span>
    </div>
    <p class="info-text">图书目录管理模块用于管理图书馆的所有图书信息，包括基本信息、库存状态等。支持展开查看详细信息，方便管理员快速了解图书详情。</p>
  </div>

  <div class="book-table">
    <nz-table #basicTable [nzData]="books" [nzFrontPagination]="false" [nzShowPagination]="false" nzSize="small">
      <thead>
        <tr>
          <th nzWidth="50px"></th>
          <th nzWidth="auto">书名</th>
          <th nzWidth="100px">作者</th>
          <th nzWidth="120px">出版社</th>
          <th nzWidth="100px">出版日期</th>
          <th nzWidth="140px">ISBN</th>
          <th nzWidth="80px">价格</th>
          <th nzWidth="80px">评分</th>
          <th nzWidth="80px">状态</th>
          <th nzWidth="150px">操作</th>
        </tr>
      </thead>
      <tbody>

        <ng-container *ngFor="let book of basicTable.data; let i = index; trackBy: trackByBookId">
          <tr>
            <td>
              <button nz-button nzType="text" nzSize="small" class="expand-button" (click)="toggleExpand(book)">
                <i nz-icon nzType="right" [class.expanded]="book.expanded"></i>
              </button>
            </td>
            <td>
              <div class="book-info">
                <span class="book-title">{{ book.title }}</span>

                <div *ngIf="book.expanded" class="book-detail">
                  <div class="detail-item">
                    <span class="label">ISBN:</span>
                    <span class="value">{{ book.isbn || '暂无' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">出版社:</span>
                    <span class="value">{{ book.publisher || '暂无' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">出版日期:</span>
                    <span class="value">{{ book.publishDate || '暂无' }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">简介:</span>
                    <span class="value description">{{ book.description || '暂无简介' }}</span>
                  </div>
                </div>
              </div>
            </td>
            <td>{{ book.author }}</td>
            <td>{{ book.publisher }}</td>
            <td>{{ book.publishDate }}</td>
            <td>{{ book.isbn }}</td>
            <td>{{ book.price }}</td>
            <td>{{ book.rating }}</td>
            <td>
              <nz-tag [nzColor]="getStatusType(book.status)">
                {{ book.status }}
              </nz-tag>
            </td>
            <td>
              <button nz-button nzSize="small" nzType="primary" (click)="viewBookDetail(book)">
                查看
              </button>

              <button nz-button nzSize="small" nzType="primary">
                编辑
              </button>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </nz-table>
  </div>
</div>